import { computed } from "@vue/runtime-core";
import { designComponent } from "src/use/designComponent";
import { useSlots } from "src/use/useSlots";

export default designComponent({
  setup(){
    
    const {slots} =useSlots(["head","body"])
    
    const classes = computed(()=>[
      "demo-use-slots-component",
      {
        "demo-use-slots-component-slot-head": slots.head.isExit()
      }
    ])
        
    return {
      render: () => (
        <div class={classes}>
          <div class="demo-use-slots-head">{slots.head("默认 head")}</div>
          <div class="demo-use-slots-body">{slots.body()}</div>
        </div>
      )
    };
  }
})
